<route>
    {
        meta: {
            title: "创建个人文件夹"
        }
    }
    </route>

<script setup name="personalFileList">
import useFileStore from '@/store/modules/file'
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'
const route = useRoute()
const router = useRouter()

const fileStore = useFileStore()

const formRef = ref()
const form = ref({
    name: ''
})
// 类型
const radio1 = ref('1')
// 规则
const rules = ref({
    name: [
        { required: true, message: '请输入文件夹名称', trigger: 'blur' }
    ]
})

const inputValue = ref('')
const dynamicTags = ref(['公安', '医院', '学校'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = tag => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {

            fileStore.create({ parentId: route.query.id, name: form.value.name }).then(() => {
                ElMessage({
                    type: 'success',
                    message: '新建成功'
                })
                router.go(-1)

            }).catch(() => {})
        }
    })
}

function onCancel() {
    router.go(-1)
}
</script>

<template>
    <div>
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="文件夹名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入文件夹名称" />
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">新建</el-button>
            <el-button type="primary" size="large" @click="onCancel">取消</el-button>
        </fixed-action-bar>
    </div>
</template>
